<script lang='ts' setup>
import { onMounted, ref, watch, } from 'vue';
import { menu } from '../../../utils/ts/consoleHeader';
import { calMenuChosen } from "../Menu/Menu";
import { useRoute } from 'vue-router';

const showDropdown = ref(false)
const showProfile = ref(false)

const active = ref(0)

const switchPage = (path: string) => {
    window.location.href = path
}


const calMenuPos = () => {
    const res = calMenuChosen(
        menu.map((val) => ({ name: val.path.split("/")[1] })),
        location.hash.split("/")[1]
    );

    if (res > -1) active.value = res;
};

// const hashchangeMenu = () => {
//     calMenuPos();
// };

const cancelProfile = () => {
    if (showProfile.value)
        showProfile.value = false
}

const route = useRoute()

watch(() => route.path, () => {
    calMenuPos()
})

onMounted(() => {
    calMenuPos();
    // window.addEventListener("hashchange", hashchangeMenu);
    window.addEventListener("click", cancelProfile, true)
});


// watch(showProfile, (newVal: boolean,) => {
//     if (!newVal) return;
//     setTimeout(() => {
//         window.addEventListener('click', cancelProfile)
//     }, 0)
// })
</script>
<template>
    <nav class="bg-gray-800 sticky top-0 z-99">
        <div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
            <div class="relative flex h-16 items-center justify-between">
                <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
                    <!-- Mobile menu button-->
                    <button type="button"
                        class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
                        aria-controls="mobile-menu" aria-expanded="false" @click="showDropdown = !showDropdown">
                        <span class="absolute -inset-0.5"></span>
                        <span class="sr-only">菜单</span>
                        <svg class=" h-6 w-6" :class="showDropdown ? 'hidden' : 'block'" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                        </svg>
                        <svg class=" h-6 w-6" :class="showDropdown ? 'block' : 'hidden'" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
                    <div class="flex flex-shrink-0 items-center">
                        <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
                            alt="Your Company">
                    </div>
                    <div class="hidden sm:ml-6 sm:block">
                        <div class="flex space-x-4">
                            <a href="javascript: void(0)"
                                class="text-white rounded-md px-3 py-2 text-sm font-medium hover:bg-gray-700"
                                :class="active === index ? 'bg-gray-900' : ''" v-for="(item, index ) in menu"
                                :key="index + 'head'" aria-current="page"
                                @click="active = index, (switchPage(item.path))">
                                {{ item.name }}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
                    <button type="button"
                        class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
                        <span class="absolute -inset-1.5"></span>
                        <span class="sr-only">通知</span>
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                            aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
                        </svg>
                    </button>

                    <!-- Profile dropdown -->
                    <div class="relative ml-3">
                        <div>
                            <button type="button" @click="showProfile = !showProfile"
                                class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
                                id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                                <span class="absolute -inset-1.5"></span>
                                <span class="sr-only">打开用户菜单</span>
                                <img class="h-8 w-8 rounded-full" src="/console/user0.png" alt="">
                            </button>
                        </div>

                        <div :class="showProfile ? 'transform opacity-100 scale-100' : 'transform opacity-0 scale-0'"
                            class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transition ease-out duration-100"
                            role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
                            <!-- Active: "bg-gray-100", Not Active: "" -->
                            <router-link to="/account/profile"
                                class="block px-4 py-2 text-sm text-gray-700 hover:text-blue-500" role="menuitem"
                                tabindex="-1" id="user-menu-item-0 ">个人信息</router-link>
                            <router-link to="/account" class="block px-4 py-2 text-sm text-gray-700 hover:text-blue-500"
                                role="menuitem" tabindex="-1" id="user-menu-item-1">设置</router-link>
                            <router-link to="/" class="block px-4 py-2 text-sm text-gray-700 hover:text-blue-500"
                                role="menuitem" tabindex="-1" id="user-menu-item-2">退出登录</router-link>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mobile menu, show/hide based on menu state. -->
        <div class="sm:hidden" id="mobile-menu" :class="showDropdown ? '' : 'hidden'">
            <div class="space-y-1 px-2 pb-3 pt-2">
                <a href="javascript: void(0)"
                    class="text-white block rounded-md px-3 py-2 text-base font-medium hover:bg-gray-700"
                    v-for="(item, index) in menu" :key="index + 'menu2'" aria-current="page"
                    :class="active === index ? 'bg-gray-900' : ''"
                    @click="active = index, showDropdown = false, switchPage(item.path)">{{
                        item.name }}</a>
            </div>
        </div>
    </nav>
</template>
<style lang='scss' scoped></style>